<template>
<p>this component show lifecycle function</p>
<button @click="counter++">{{ counter }}</button>
</template>
<script setup>
import {onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onUnmounted,onBeforeUnmount,ref} from "vue";

const counter = ref(0);

console.log("component1","init");

onBeforeMount(()=>{
    console.log("component1","onBeforeMount");
});

onMounted(()=>{
    console.log("component1","onMounted");
});

onBeforeUpdate(()=>{
    console.log("component1","onBeforeUpdate");
});

onUpdated(()=>{
    console.log("component1","onUpdated");
});

onBeforeUnmount(()=>{
    console.log("component1","onBeforeUnmount");
});

onUnmounted(()=>{
    console.log("component1","onUnmounted");
});

</script>

<style scoped>
</style>